<template>
	<view class="main-content-frame u-flex-col">
		<view class="u-flex-1 u-padding-left-40 u-padding-right-30">
			<u-form :model="form" ref="uForm">
				<u-form-item :label-width="220" :required="true" label="客户所在城市">
					<u-input @click="showRegion = true" v-model="city" type="select" input-align="right"
						placeholder="请选择城市" />
				</u-form-item>
				<view class="hint xs u-margin-top-10">
					您的甩单需求平台会通知给该城市的同行
				</view>
				<u-form-item :label-width="220" :required="true" label="客户需要额度">
					<u-input v-model="form.quota" input-align="right" placeholder="请输入额度" />
					<text class="nr u-padding-left-10">万</text>
				</u-form-item>
				<u-form-item :border-bottom="false" label-position="top" :label-width="220" :required="true"
					label="情况描述">
					<u-input v-model="form.description" type="textarea" placeholder="请输入客户情况描述" :height="200"
						:custom-style="{
								padding: '20rpx',
								borderRadius: '8rpx',
								background: '#FAFAFA'
							}" />
				</u-form-item>
				<view class=" xs u-margin-top-10 u-margin-bottom-15 ">
					客户相关信息图片（可支持上传6张图片）
				</view>
				<u-form-item :border-bottom="false" :label-width="0">
					<uploader @after-read="afterRead" :file-list="images" :max-upload="6" :deletable="true" useSlot
						@delete="handleDelete">
						<view class="column-center">
							<view class="upload-area row-center">
								<image src="/static/images/uploader_icon.png"></image>
							</view>
						</view>
					</uploader>
				</u-form-item>

			</u-form>
		</view>
		<view class="footer-area">
			<u-button @click="publish" shape="circle" hover-class="none" :custom-style="{
				width: '70%',
				color: '#FFF',
				margin: '4vh 15%',
				background: 'linear-gradient(180deg, #6BB2FF 0%, #437EEA 100%)'
			}">发布</u-button>
		</view>
		<u-select v-model="showRegion" mode="mutil-column-auto" @confirm="selectCity" :list="showArea"></u-select>
	</view>
</template>

<script>
	import area from '@/utils/area'
	import {
		uploadFile
	} from '@/utils/tools'
	import {
		publishSameTrade
	} from '@/api/networkSquare'
	export default {
		data() {
			return {
				showArea:[],
				city: '',
				form: {
					province_id: '',
					city_id: '',
					quota: '',
					description: '',
					images: ''
				},
				product: {},
				showRegion: false,
				images: []
			}
		},
		onLoad({edit,id}) {
			if(edit){
				let data = uni.getStorageSync('same_trade_item');
				this.form.id = data.id;
				this.form.province_id = data.province_id;
				this.form.city_id = data.city_id;
				this.form.description = data.description;
				this.form.quota = data.quota;
				this.form.images = data.images;
				this.images = data.images.map(item=>({url:item}));
				this.city = data.city;
			}
			let showArea = this.$u.deepClone(area);
			showArea.forEach(({
				children
			}) => {
				children.forEach(item => {
					delete item.children;
				});
			});
			this.showArea = showArea;
		},
		methods: {
			selectCity(e) {
				this.form.province_id = e[0].value
				this.form.city_id = e[1].value
				this.city = e[1].label
			},
			afterRead(e) {
				const file = e;
				uni.showLoading({
					title: '正在上传中...',
					mask: true
				});
				file.forEach(item => {
					uploadFile(item.path).then(res => {
						uni.hideLoading();
						this.images.push(res);
					});
				})
			},
			handleDelete(index, a) {
				this.images.splice(index, 1);
			},
			async publish() {
				let _this = this;
				if(_this.$u.test.isEmpty(_this.form.province_id))return _this.$u.toast('请选择城市');
				if(_this.$u.test.isEmpty(_this.form.quota))return _this.$u.toast('请输入额度');
				if(_this.$u.test.isEmpty(_this.form.description))return _this.$u.toast('请输入客户情况描述');
				
				if(_this.images.length > 0){
					_this.form.images = _this.images.map(v => v.url).join(',')
				}
				
				uni.showLoading({
					title: '数据上传中...',
					mask: true
				});
				
				let {
					code,
					msg
				} = await publishSameTrade({
					..._this.form
				})
				uni.hideLoading();
				
				_this.$u.toast(msg);
				
				setTimeout(()=>{
					uni.redirectTo({
						url:'/yixu/pages/network_square/my_business_card/index'
					})
				},800)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FFF;

		.main-content-frame {
			min-height: 100vh;
		}

		.hint {
			color: #FF7D00;
		}

		.uploader-container {
			.upload-area {
				width: 160rpx;
				height: 160rpx;
				border: 4rpx dashed #E5E5E5;
				border-radius: 10rpx;

				image {
					width: 54rpx;
					height: 44rpx;
				}
			}
		}
	}
</style>